<template>
<!-- 订单管理 -->
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-guide__guideserveroute}">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getalldata()">
                <el-form-item>
                    <el-input v-model="dataForm.guideIdCard" placeholder="请输入身份证号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataForm.guideName" placeholder="请输入导游名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataForm.guidePhone" placeholder="请输入导游手机号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="dataForm.status" clearable placeholder="请选择订单状态">
                        <el-option label="待支付" value="0"></el-option>
                        <el-option label="待确认" value="1"></el-option>
                        <el-option label="待使用" value="2"></el-option>
                        <el-option label="已取消" value="-1"></el-option>
                        <el-option label="退款中" value="-2"></el-option>
                        <el-option label="已退款" value="-3"></el-option>
                        <el-option label="已完成" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click="getalldata()">{{ $t('query') }}</el-button>
                </el-form-item>
                <!--<el-form-item>-->
                <!--<el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>-->
                <!--</el-form-item>-->

            </el-form>
            <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
                <el-table-column prop="orderCode" label="订单编号" min-width="200" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="guideIdCard" label="身份证号" min-width="200" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="orderStatus" width="100" align="center" :show-overflow-tooltip="true" label="订单状态">
                    <template slot-scope="scope">

                        <span v-if="scope.row.orderStatus == 0">待支付</span>
                        <span v-if="scope.row.orderStatus == 1">待确认</span>
                        <span v-if="scope.row.orderStatus == 2">待使用</span>
                        <span v-if="scope.row.orderStatus == -1">已取消</span>
                        <span v-if="scope.row.orderStatus == -2">退款中</span>
                        <span v-if="scope.row.orderStatus == -3">已退款</span>
                        <span v-if="scope.row.orderStatus == 3">已完成</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderAmount" label="订单金额" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="reserveDate" label="预订时间" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>

                <el-table-column prop="guideName" label="导游名称" width="120" :show-overflow-tooltip="true" align="center">
                </el-table-column>
                <!-- <el-table-column prop="guideId" label="导游id" min-width="180" :show-overflow-tooltip="true"
                    align="center"></el-table-column> -->
                <el-table-column prop="routeName" label="服务路线" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="guidePhone" label="导游联系方式" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>

                <!--<el-table-column prop="userId" label="用户id"   width="110"-->
                <!--:show-overflow-tooltip="true" align="center"></el-table-column>-->
                <el-table-column prop="linkName" label="联系人" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="linkPhone" label="联系电话" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="personNum" label="出行人数" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>

                <!-- <el-table-column prop="creator" label="创建人" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column> -->
                <el-table-column prop="createDate" label="下单时间" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <!-- <el-table-column prop="updater" label="修改人" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="updateDate" label="修改时间" width="110" :show-overflow-tooltip="true"
                    align="center"></el-table-column> -->

                <el-table-column :label="$t('handle')" fixed="right" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" v-if="scope.row.orderStatus == 1"
                            @click="Confirmtheorder(scope.row)">确认订单</el-button>
                        <el-button type="text" size="small" v-if="scope.row.orderStatus == 2"
                            @click="Canceltheorder(scope.row)">核销订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"
                :current-page="dataForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="dataForm.limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->

        </div>
    </el-card>
</template>

<script>

export default {
    data() {
        return {
            dataListLoading: false,
            total: 0,
            dataForm: {
                guideIdCard: '',
                guideName: '',
                guidePhone: '',
                page: 1,
                limit: 10,
                orderCode: '',
                status: '',
            }
        }
    },
    components: {

    },
    created() {
        this.getalldata();
    },
    methods: {
        getalldata() {
            this.dataListLoading = true;
            this.$http
                .get("/scenic/guideorder/selectOrderPageByGuide", {
                    params: this.dataForm
                })
                .then((res) => {
                    //  console.log('111111111111111111',res)
                    this.dataListLoading = false;
                    if (res.data.code == 0) {
                        this.dataList = res.data.data.list;
                        this.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
        pageSizeChangeHandle(val) {
            this.dataForm.limit = val;
            this.getalldata();
        },
        pageCurrentChangeHandle(val) {
            this.dataForm.page = val;
            this.getalldata();
        },
        Confirmtheorder(e) {

            this.$confirm('此操作将确认订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http
                    .post("/scenic/guideorder/confirmOrder", { orderCode: e.orderCode })
                    .then((res) => {
                        //  console.log('111111111111111111',res)
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '成功!'
                            });
                            this.dataForm.page = 1;
                            this.getalldata();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            }).catch(() => {

            });
        },
        Canceltheorder(e) {
            this.$prompt('请输入验证码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                //  inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '验证码格式不正确'
            }).then(({ value }) => {
                this.$http
                    .post("/scenic/guideorder/verifyGuideVerifyCode", {
                        orderCode: e.orderCode,
                        verifyCode: value
                    })
                    .then((res) => {
                        //  console.log('111111111111111111',res)
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '成功!'
                            });
                            this.dataForm.page = 1;
                            this.getalldata();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已经取消输入'
                });
            });



        },

    }

}
</script>
